<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
    </view>
    <view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
      <text>
        礼品{{info.type == 1 ?"送货" : "退货"}}单
      </text>
    </view>
    
		<uni-popup ref="binds11" type="center" :isMaskClick='false'>
			<view class="uni-popup-wrapper" style="padding: 0;">
				<view class="uni-popup-title" style="line-height:45rpx;margin-top: 79rpx;margin-bottom: 79rpx;">
					是否要{{flag?'确定':'拒绝'}}{{info1.type==1?"收货":"退货"}}?
				</view>
				<view class="uni-popup-btn-wrapper">
					<button class="uni-popup-btn cu-btn left" @click="confirmCancel3">取消</button>
					<button class="uni-popup-btn cu-btn right" @click="confirm3">确认</button>
				</view>
			</view>
		</uni-popup>
    <view class="content" :class="info1.confirmStatus === 0 && this.userInfo.merchantId? 'isshowbotton': ''">
      <view class="info" v-if="info && userInfo.merchantId">
        <view class="shop">
          <view class="time">
            {{info.type == 1 ?"送货" : "退货"}}时间:{{info.createDate}}
          </view>
          <view class="label merchant3-item-right"
            :class="info.confirmStatus==0?'cu-dangerous':info.confirmStatus==1?info.type==1?'cu-success':'cu-success':'cu-dangerous'">
            {{info.confirmStatus==0?'待确认':info.confirmStatus==1?info.type==1?"收货成功":"退货成功":info.type==1?'拒绝收货':'拒绝退货'}}
          </view>
        </view>
      </view>
      <view class="info" v-if="info && !userInfo.merchantId">
        <view class="shop">
          <view class="shop_name">商家：{{info.merchantName}}</view>
          <view class="label merchant3-item-right"
            :class="info.confirmStatus==0?'cu-dangerous':info.confirmStatus==1?info.type==1?'cu-success':'cu-success':'cu-dangerous'">
            {{info.confirmStatus==0?'待商家确认':info.confirmStatus==1?info.type==1?"送货成功":"退货成功":info.type==1?'拒绝送货':'拒绝退货'}}
          </view>
        </view>
        <view class="time">
          {{info.type == 1 ?"送货" : "退货"}}时间:{{info.createDate}}
        </view>
      </view>
      <view class="list">
        <view class="tabel_top">
          <view class="tabel_item">
            礼品名称
          </view>
          <view class="tabel_item">
           {{info.type == 1 ?"送货" : "退货"}}数量
          </view>
          <view class="tabel_item">
           库存总计
          </view>
        </view>
        <view class="item" v-for="(item, index) in list" :key="index">
          <view class="tabel_item">
            {{item.giftName}}
            <view v-if="item.month === 2" class="red-type">
              （已过期）
            </view>
            <view v-else-if="item.month === 3" class="red-type">
              （未生效）
            </view>
          </view>
          <view class="tabel_item">
            {{item.sendNumber}}
          </view>
          <view class="tabel_item">
            {{item.stock}}
          </view>
        </view>
      </view>
      <view class="title">
        出入库凭证
      </view>
      <view class="image_list">
        <image
          @click="ViewImagefm(index)"
          class="item"
          v-for="(item,index) in imgList" :key="index"
          :src="item"
          mode="scaleToFill"
        />
      </view>
      <view class="mask"></view>
      <view class="bottom_box" v-if="info1.confirmStatus === 0 && userInfo.merchantId && userInfo.whetherAdmin == 0">
        <view class="merchant3-btn btn c-cancel-btn solid"
          @click="confirmBefore3(false)">
          拒绝{{info1.type==1?"收货":"退货"}}
        </view>
        <view class="merchant3-btn btn c-cancel-btn solid"
          @click="confirmBefore3(true)">
          确认{{info1.type==1?"收货":"退货"}}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  data() {
    return {
      info: {},
      info1: {},
      list: [],
      userInfo: uni.getStorageSync("Pduser"),
      tabIndex: 1,
      imgList: [],
      flag: false
    }
  },
  onLoad(option) {
  },
  onShow() {
    this.info1 = uni.getStorageSync('recordDetali')
    console.log(this.info1);
    // this.list = this.info1.giftInfoList
    this.getInfo()
  },
  methods: {
			confirm3(flag) {
				if (this.confirmLoading) {
					return
				}
				this.confirmLoading = true

				var param = {
					movementNo: this.info.movementNo,
					merchantsId: this.info.merchantId,
					state: this.info.type,
					confirmStatus: this.info.confirmStatus,
					giftList: this.info.giftInfoList.map(item => {
						return {
							giftId: item.id,
							number: item.sendNumber
						}
					})
				}
				if (this.flag) { //确认
					param.confirmStatus = 1
				} else { //拒绝
					param.confirmStatus = 2
				}

				this.$myRequest
					.post("/api/mobile/vehicleOwner/auditGiftForRecord", param, {
						header: 'application/json'
					}).then(res => {
						console.log(res)
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.code != 200) {
							this.confirmLoading = false
						}
						// this.getInitAsyncData()
            this.fanhui()
						this.$refs.binds11.close()
					})

				console.log('param', param)
			},
			confirmCancel3() {
				this.$refs.binds11.close()
				this.confirmLoading = false
			},
			confirmBefore3(flag) {


				this.flag = flag
				this.$refs.binds11.open()

			},
    fanhui() {
      uni.navigateBack({
        delta: 1
      });
    },
    ViewImagefm(index) {
      uni.previewImage({
        urls: this.imgList,
        current: index,
      });
    },
    getInfo() {
				uni.showLoading({
					title: '加载中'
				});
      this.$myRequest
					.get("/api/mobile/vehicleOwner/getGiftInventoryByMerchantsId", {
						merchantsId: Number(this.info1.merchantId),
						userId:this.userInfo.merchantId ? '' : this.userInfo.id,
            movementNo: this.info1.movementNo,
						pageSize: 99999
					}).then(res => {
						this.info = (res.giftsForRecords.pageList[0] || []);
            this.list = this.info.giftInfoList
            if(this.info.voucher) {
              this.imgList = this.info.voucher.split(',')
            }
						uni.hideLoading()
					});
    },
  },
}
</script>
<style lang="less" scoped>

	.box {
		width: 100%;
		min-height: 100vh;
		// padding-bottom: 130rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			// top: 104rpx;
			right: 30rpx;
		}

		p {
			position: absolute;
			// top: 90rpx;
			line-height: 45rpx;
			bottom: 21rpx;
			right: 30rpx;
			font-size: 32rpx;
			color: #fff;
		}
	}
	.fixed {
		// display: flex;
		position: fixed !important;
		top: 0;
		left: 0;
		width: 100% !important;
		z-index: 40;
	}
  .content{
    padding: 30rpx;
    .info{
      padding-bottom: 20rpx;
      margin-bottom: 30rpx;
      border-bottom: 1rpx solid #D8D8D8;
      .shop {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20rpx;
        .shop_name{
          font-size: 30rpx;
          font-weight: bold;
        }
      }
      .merchant3-item-right {
        // width: 123rpx;
        height: 48rpx;
        line-height: 48rpx;
        text-align: center;
        font-size: 26rpx;
        background-color: transparent;
        border-radius: 6rpx 6rpx 6rpx 6rpx;
        white-space: nowrap;
        border: 2rpx solid #64B6A8;
        padding: 0 20rpx;
        &.cu-success {
          border-color: #64B6A8;
          color: #64B6A8;
        }

        &.cu-cancel {
          border-color: #666666;
          color: #666666;
        }

        &.cu-dangerous {
          border-color: #E00000;
          color: #E00000;
        }
      }
      .label1{
        border: none;
      }
    }
    .nums{
      width: 100%;
      display: flex;
      padding: 30rpx 0 ;
      line-height: 42rpx;
      border-bottom: 1rpx solid #D8D8D8;
      .num_item{
        width: 50%;
        font-size: 30rpx;
        color: #333;
        font-weight: bold;
        display: flex;
        .label{
          width: 120rpx;
          margin-right: 40rpx;
        }
      }
    }
    .tabs{
      padding-top: 30rpx;
      margin-bottom: 40rpx;
      display: flex;
      .tab_item{
        margin-right: 120rpx;
        color: #999999;
        font-size: 24rpx;
        &.active {
          color: #333;
          font-size: 28rpx;
          font-weight: bold;
        }
      }
    }
    .list{
      // padding-bottom: 20rpx;
      margin-bottom: 40rpx;
      border-bottom: 1rpx solid #D8D8D8;
      .picker{
        margin-bottom: 30rpx;
      }
      .tabel_top{
        display: flex;
        margin-bottom: 40rpx;
        .tabel_item{
          width: 33.33%;
          text-align: center;
          color: #999999;
          font-size: 28rpx;
          line-height: 40rpx;
        }
      }
      .item{
        
        margin-bottom: 40rpx;
        display: flex;
        .tabel_item{
          width: 33.33%;
          text-align: center;
          color: #333;
          font-size: 28rpx;
          line-height: 40rpx;
          .red-type {
            color: #E64B4C;
          }
        }
      }
    }
  }
  .title{
    font-size: 30rpx;
    color: #333;
    line-height: 34rpx;
    font-weight: 500;
    margin-bottom: 30rpx;
  }
  .image_list{
    display: flex;
    flex-wrap: wrap;
    .item {
      background: #fff;
      margin-right: 35rpx;
      margin-bottom: 35rpx;
      width: 207rpx;
      height: 207rpx;
      border-radius: 8rpx;
      opacity: 1;
      border: 1rpx solid #D8D8D8;
      position: relative;
      overflow: hidden;
    }
    .item:nth-child(3n) {
      margin-right: 0;
    }
  }.uni-popup-wrapper {
		width: 600rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		opacity: 1;
		padding: 0 32rpx;
		text-align: center;
		overflow: hidden;
	}

	.uni-popup-title {
		margin-top: 32rpx;
		font-size: 32rpx;
		font-weight: 400;
		color: #333333;
		line-height: 30rpx;
	}

	.uni-popup-content {
		padding: 30rpx 32rpx 40rpx 32rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		line-height: 42rpx;

	}

	.uni-popup-btn-one {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background: #64B6A8;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		opacity: 1;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 30rpx;
		margin-bottom: 32rpx;
	}

	.uni-popup-mark {
		color: #E00000;
	}

	.uni-popup-tip {
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
		margin: 10rpx auto;
	}

	.uni-popup-btn-wrapper {
		display: flex;
		width: 100%;
	}

	.uni-popup-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 30rpx;
		font-weight: 400;
		opacity: 1;
		border-radius: 0;

		&.left {
			background: #F2F2F2;
			color: #333333;
		}

		&.right {
			background: #64B6A8;
			color: #FFFFFF;
		}
	}

	.uni-popup-list {
		margin: 0 22rpx 32rpx 22rpx;

		.uni-popup-item {
			margin-top: 20rpx;

			font-size: 28rpx;
			font-weight: 400;
			color: #333333;
			line-height: 39rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}
  .bottom_box{
    position: fixed;
    left: 0;
    bottom: 0;
    padding: 30rpx 30rpx 80rpx;
    background: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    .merchant3-btn {
      width: 320rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-color: #64B6A8;
      background-color: #64B6A8;
      color: #64B6A8;
      border-radius: 50px;
      font-size: 30rpx;
      font-weight: 400;
      color: #fff;
      text-align: center;

      display: flex;
      justify-content: center;
      align-items: center;

    }
  }
  .mask{
    
    position: fixed;
    left: 0;
    bottom: 0;
  }
  .isshowbotton{
    padding-bottom: 200rpx;
  }
</style>